<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>修改密码</title>
    <link rel="shortcut icon" href="image/logo.png">
    <link rel="stylesheet" type="text/css" href="css/layui.css" />
    <link rel="stylesheet" type="text/css" href="css/font_awesome.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
  </head>

  <body>
    <div id="index"> 
      <section>
        <!-- 内容区 -->
        <div class="main_content">
          <div class="content_header">
            <a href="index.html" title="首页">
              <i class="icon icon-home"></i>首页
            </a>
            <a class="current" href="javascript:;">SEO优化</a>
          </div>

          <div class="page_content">
            <div class="layui-tab">
              <ul class="layui-tab-title">
                <li class="layui-this">忘记密码</li>
              </ul>
              <div class="layui-tab-content">
                <!-- 全站标题SEO -->
                <div class="layui-tab-item layui-show"> 
                  <form class="layui-form forget_form" action="" method="post">
                    <div class="layui-form-item">
                      <label class="layui-form-label">用户名</label>
                      <div class="layui-input-inline span4">
                        <input value="m3games" autocomplete="off" class="layui-input" disabled readonly>
                      </div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label control-label">
                        <i class="must_red">*</i>旧密码
                      </label>
                      <div class="layui-input-inline span4">
                        <input type="password" name="pass_old" lay-verify="pass_old" placeholder="请输入旧密码" autocomplete="off" class="layui-input">
                      </div>
                      <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label control-label">
                        <i class="must_red">*</i>新密码
                      </label>
                      <div class="layui-input-inline span4">
                        <input type="password" name="pass_new" lay-verify="pass_new" placeholder="请输入新密码" autocomplete="off" class="layui-input">
                      </div>
                      <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
                    </div>
                    <div class="layui-form-item">
                      <label class="layui-form-label control-label">
                        <i class="must_red">*</i>确认密码
                      </label>
                      <div class="layui-input-inline span4">
                        <input type="password" name="pass_newconfirm" lay-verify="pass_newconfirm" placeholder="请输入密码" autocomplete="off" class="layui-input">
                      </div>
                      <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
                    </div>

                    <div class="form-actions">
                      <button class="btn btn-success layui-btn" type="button"  lay-submit="" lay-filter="forget_submit">
                        <i class="icon-ok bigger-110"></i> 提交
                      </button>
                    </div>
                  </form>
                </div>

              </div>
            </div>
          </div>

        </div>
      </section>
      <div class="dialogImg">
        <span style="display: inline-block;width: 100%;text-align: right;font-size: 16px;padding: 5px 10px;cursor: pointer;">x</span>
        <img src="">
      </div>

    </div>

    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/layui.js" charset="utf-8"></script>
    <script src="js/index.js"></script>
    <script type="text/javascript">
      layui.use(['form', 'layedit'], function(){
        var form = layui.form,
            layedit = layui.layedit,
            layer = layui.layer;

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');
        //自定义验证规则
        form.verify({
          title: function(value){
            if(value.length < 5){
              return '标题至少得5个字符啊';
            }
          },
          pass_old: [
            /^[\S]{6,12}$/,
            '密码必须6到12位，且不能出现空格'
          ],
          pass_new: function(val){
            if(!new RegExp(/^[\S]{6,12}$/).test(val)){
              return '密码必须6到12位，且不能出现空格';
            }else if(val == $('input[name="pass_old"]').val()){
              return '新密码与旧密码一致';
            }
          },
          pass_newconfirm: function(val){
            if(val != $('input[name="pass_new"]').val()){
              return '新密码与旧密码不一致';
            }
          },
          content: function(value){
            layedit.sync(editIndex);
          }
        });

        //监听提交
        form.on('submit(forget_submit)', function(data){
          layer.alert(JSON.stringify(data.field), {
            title: '最终的提交信息'
          })
          return false;
        });
 

      })   
    </script>
  </body>

</html>